<template>
  <div class="search-container">
    <!-- 搜索组件一级路由   $router.back()返回上一个页面-->
    <van-nav-bar
      left-arrow
      title="搜索中心"
      @click-left="$router.push('/home')"
    >
    </van-nav-bar>

    <!-- https://youzan.github.io/vant/#/zh-CN/search -->
    <van-search
      placeholder="请输入搜索关键词"
      shape="round"
      v-model.trim="keyword"
      @input="getsuggestion"
      @search="toresult"
    >
      <template #action>
        <div>搜索</div>
      </template>
    </van-search>

    <!-- 联想建议 -->
    <van-cell-group>
      <van-cell
        icon="search"
        v-for="(item, index) in highlightkey"
        :key="index"
        @click="toresults(index)"
      >
        <template #title>
          <div v-html="item"></div>
        </template>
      </van-cell>
    </van-cell-group>
    <!-- /联想建议 -->
  </div>
</template>

<script>
import { getsuggestions } from '../../api/search'
export default {
  name: 'search',
  data () {
    return {
      keyword: '', // 搜索关键字
      options: [],
      timesid: '',
      isopen: true
    }
  },
  methods: {
    // 点击搜索跳到结果页面
    toresult () {
      if (this.keyword !== '') {
        this.$router.push({
          path: '/result',
          query: { searchvalue: this.keyword }
        })
      }
    },
    // 点击推荐跳往结果页面
    toresults (index) {
      this.$router.push({
        path: '/result',
        query: { searchvalue: this.options[index] }
      })
    },
    // 基础版本
    // getsuggestion () {
    //   if (this.keyword === '') {
    //     this.options = []
    //     return
    //   }
    //   console.log(1)
    //   getsuggestions({ q: this.keyword }).then(res => {
    //     console.log(res)
    //     this.options = res.data.data.options
    //   })
    // },

    // 优化性能一---防抖
    async getsuggestion () {
      if (this.keyword === '') {
        this.options = []
        return
      }
      clearInterval(this.timesid)
      this.timesid = await setTimeout(() => {
        getsuggestions({ q: this.keyword }).then(res => {
          console.log(res)
          this.options = res.data.data.options
        })
      }, 1000)
    }

    // 优化性能一---节流
    // async getsuggestion () {
    //   if (this.keyword === '') {
    //     this.options = []
    //     return
    //   }
    //   if (this.isopen === true) {
    //     this.isopen = false
    //     getsuggestions({ q: this.keyword }).then(res => {
    //       console.log(res)
    //       this.options = res.data.data.options
    //     })

    //     setTimeout(() => {
    //       this.isopen = true
    //     }, 1000)
    //   }
    // }
  },
  computed: {
    highlightkey () {
      const opts = []
      this.options.forEach(value => {
        const va = value.replace(
          this.keyword,
          `<span style='color:red'>${this.keyword} </span>`
        )
        opts.push(va)
      })
      return opts
    }
  }
}
</script>

<style lang="less">
.search-container {
  .van-nav-bar {
    background-color: #3296fa;
    .van-nav-bar__title {
      color: white;
    }
    .van-icon {
      color: white;
    }
  }
}
</style>
